import { defineComponent } from "vue";
import { useUploader } from "@/hooks/uploader";
import Field from "@/components/Field";
import { IFormItem } from "../../types";
export default defineComponent({
  name: "upload",
  props: {
    modelValue: {
      type: String,
      default: "",
    },
    item: {
      type: Object as () => IFormItem,
      default: () => {},
    },
  },
  emits: ["change"],
  setup(props, { emit }) {
    const { upload } = useUploader({});
    return () => {
      const onUpload = (url: string) => {
        emit("change", url);
      };
      const renderValue = () => {
        return (
          <img src={props.modelValue} class="w-[38px] h-[38px] rounded-50" />
        );
      };
      return (
        <div class={"flex flex-wrap"}>
          <Field
            name={"请选择" + props.item.label}
            onClick={() => upload(onUpload)}
            isLink={!props.modelValue}
            value={props.modelValue}
            v-slots={{ value: () => renderValue() }}
          />
        </div>
      );
    };
  },
});
